<template>
    <div class="foodManage">
        <CommonTabs :tabList="tabList" v-model="activeName"></CommonTabs>
        <div class="foodManageContent">
            <div class="search">
                <el-form :model="searchForm" label-width="80px" :inline="true" ref="form">
                    <el-form-item prop="id" label="订单编号">
                        <CommonInput v-model="searchForm.id" :placeholder="'请输入订单编号'"></CommonInput>
                    </el-form-item>
                    <el-form-item prop="userName" label="用户名称">
                        <CommonInput v-model="searchForm.userName" :placeholder="'请输入用户名称'"></CommonInput>
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="handleSearch">搜索</el-button>
                        <el-button @click="handleReset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <CommonTable :columns="orderColumns" :table-data="tableData" :pagination="pagination" style="flex: 1">
                <template #edit="{ row }">
                    <el-button type="text" class="edit" @click="handleDetail(row)">订单详情</el-button>
                </template>
            </CommonTable>
        </div>
    </div>
</template>

<script>
import { orderColumns } from "./columns"
import { getOrderData } from "@/api/orderManage"
// 接口
export default {

    data() {
        return {
            name: '',
            assetsUrl: '',
            searchForm: {
                id: '',
                userName: "",
            },
            // 分页器信息
            pagination: {
                pageNum: 1,
                pageSize: 10,
                total: 10,
            },
            orderColumns,//表头列
            curRow: {},
            tableData: [
                {}
            ],
            tabList: [
                {
                    label: '订单管理',
                    name: 'orderManage',
                }
            ],
            activeName: 'orderManage',
        };
    },

    mounted() {
        this.getTableData()
    },

    methods: {

        async getTableData() {
            let data = {
                page: {
                    ...this.pagination
                },
                param: {
                    id: this.searchForm.id,
                    uName: this.searchForm.userName
                }
            }
            console.log(data, 'data');
            const res = await getOrderData(data)
            console.log(res.data.records, 'rr');
            this.tableData = res.data.records
            this.pagination.total = res.data.total * 1
        },
        setPage(v) {
            this.pagination.pageNum = v
            this.getTableData()
        },
        setSize(v) {
            this.pagination.pageNum = 1
            this.pagination.pageSize = v
            this.getTableData()
        },
        handleAddFood() {
            this.curRow = {}
            this.changeDialogShow = true
        },
        handleDetail(row) {
            this.curRow = row
            // this.changeDialogShow = true
            this.$router.push(
                {
                    path:'/orderDetail',
                    query:{
                        row:this.curRow
                    }
                }
            )
        },
        handleDel(row) {
            this.curRow = row
            this.delShow = true
        },
        handleSearch() {
            this.getTableData()
        },
        handleReset() {
            this.$refs.form.resetFields();
            this.getTableData()
        }
    },
};
</script>

<style lang="less" scoped>
.foodManage {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .foodManageContent {
        flex: 1;
        display: flex;
        flex-direction: column;

        .ing {
            color: rgb(34, 202, 104);
        }

        .stop {
            color: #e75511;
        }

        .row-img {
            width: 100px;
            height: 100px;

        }

        .title {
            line-height: 25px;
            padding: 16px 0 12px 0;
            text-align: center;
            font-size: 18px;
            font-weight: bolder;
        }

        .search {
            padding: 0 24px;

            .el-button {
                width: 74px;
                height: 32px;
                padding: 0;
                text-align: center;
                background: #155bd4;
                border-radius: 2px;
                border: 1px solid #dcdee0;
                color: #fff;

                span {
                    line-height: 32px;
                }

                &:hover {
                    // color: #155bd4;
                    // background: #edf4ff;
                    border: 1px solid #155bd4;
                }
            }
        }

        .el-table__row {
            .activeText {
                cursor: pointer;
                // color: var(--active-text-color);
            }
        }
    }
}
</style>